<template>
    <div class="unlawful-reporting-background">
       <!--  <van-row type="flex" justify="space-around">
            <van-col span="24" class="unlawful-reporting-lable"><span>上传视频&#12288;</span><span style="color:#a7a6a6">(可选)</span></van-col>
        </van-row>
        <van-row  style="margin-bottom:  10px ;">
            <van-col span="4" style='height: 77px;margin: 3px;'>     
                <upload type='video' @img="onRead"></upload>
            </van-col>
        </van-row> -->
        <van-row type="flex" justify="space-around">
            <van-col span="24" class="unlawful-reporting-lable">上传照片</van-col>
        </van-row>
        <van-row  style="margin-bottom:  23px ;">
             <van-col span="4" style='height: 77px;margin: 3px;'>
               <upload  type='photo'  @img="onRead1"></upload>
            </van-col>
             <van-col span="4" style='height: 77px;margin: 3px;'>
               <upload @img="onRead2"></upload>
            </van-col>
            <van-col span="4" style='height: 77px;margin: 3px;'>
               <upload @img="onRead3"></upload>
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">  
            <div class="unlawful-reporting-lable">请选择违法时间</div>                       
                    <van-field class='unlawful-reporting-field' v-model="saveData.illegalTime" placeholder="违法时间" error-message="" readonly @click.native='selectTime();'/>                         
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">
                <div class="unlawful-reporting-lable">请输入违法路段</div>
                <van-field class='unlawful-reporting-field' v-model="saveData.illegalRoad" placeholder="违法路段" error-message=""  @blur='showTabbar()' @focus='hiddenTabbar()'/>
                
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">
                 <div class="unlawful-reporting-lable">请输入车牌号</div>
                <van-field class='unlawful-reporting-field' v-model="saveData.carNo" placeholder="车牌号" error-message=""  @blur='showTabbar()' @focus='hiddenTabbar()' />
               
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">   
            <div class="unlawful-reporting-lable">请输入违法事实</div>               
                    <van-field class='unlawful-reporting-field' style='min-height: 80px' v-model="saveData.illegalDesc" type="textarea" placeholder="违法事实" rows="1" autosize  @blur='showTabbar()' @focus='hiddenTabbar()'/>
                                
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">
                 <div class="unlawful-reporting-lable">请输入联系人</div>
             <!--    <van-field class='unlawful-reporting-field' v-model="saveData.contractPerson" placeholder="联系人" error-message="" readonly @click.native='selectLink();'  @blur='showTabbar()' @focus='hiddenTabbar()'/> -->
             <van-field class='unlawful-reporting-field'  v-model="saveData.contractPerson" placeholder="联系人" error-message=""  @blur='showTabbar()' @focus='hiddenTabbar()'/>              
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">
                <div class="unlawful-reporting-lable">请输入证件号码</div>
                <van-field class='unlawful-reporting-field' v-model="saveData.contractCer" placeholder="证件号码" error-message=""  @blur='showTabbar()' @focus='hiddenTabbar()'/>
                
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">
                <div class="unlawful-reporting-lable">请输入联系电话</div>
                <van-field class='unlawful-reporting-field' :disabled='phoneSys' v-model="saveData.contractPhone" placeholder="联系电话" error-message=""  @blur='showTabbar()' @focus='hiddenTabbar()'/>
                
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">
                <van-checkbox shape='square' v-model="ty" class='unlawful-reporting-checkbox'></van-checkbox>我已阅读<router-link to="/instructions" style="color: #30AFF7;">《相关说明》</router-link>并自愿承担相关法律责任
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around" style='margin: 12px 6px 80px 6px ;color: red'>
            <van-col span="24">
                <b>注意事项：</b>
                <br>
                <br> &#12288;&#12288;1.举报人应在发现违法行为后一小时内进行举报，便于固定证据，查处违法行为
            </van-col>
        </van-row>
        <van-tabbar v-show='tabbarSign' >
            <van-tabbar-item class="unlawful-reporting-item" @click.native='save()'>上报</van-tabbar-item>
        </van-tabbar>
        <van-popup v-model="showTime" style='width:90%'>
            <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @confirm='hiddenTime()' @cancel='hiddenTime()' />
        </van-popup>
        <van-popup v-model="showLink" style='width:90%'>
            <van-picker @change="getLxr"  show-toolbar title="选择联系人" :columns="columns" @cancel="hiddenLink()" @confirm="hiddenLink()" />
        </van-popup>
    </div>
</template>
<script>
import { Toast } from 'vant';
import moment from 'moment';
import { IllegalReportService } from './api';
import {getUserInfo} from './utils'
export default {
    name: 'unlawfulReporting',
    data() {
        return {
            tabbarSign:true,
            show: true,
            phoneSys:false,
            saveData:{
                carNo:'',
                contractCer:'',
                contractPerson:'',
                contractPhone:'',
                illegalDesc:'',
                illegalRoad:'',
                illegalTime:'',
                picStrs:[],
                openId:''
            // picStr 上传图片的Base64转码的字符串 String 
            // picUrl 上传图片的路径 String 
            // vedioStr 上传视频的Base64转码的字符串 String 
            // vedioUrl 上传视频的路径 
            },           
            ty: false,
            columns: ['彭万里', '高大山', '谢大海', '马宏宇', '林莽'],
            minHour: 10,
            maxHour: 20,
            minDate: new Date(),
            maxDate: new Date(2019, 10, 1),
            currentDate: new Date(),
            showTime: false,
            showLink: false,
            showFile1:'',
             showFile2:'',
              showFile3:''
        };
    },
    created() {
          getUserInfo(this.$route.query.code).then((res)=>{
            this.saveData.openId=res.openid;
            if(res&&res.phoneNo){
            this.saveData.contractPhone=res.phoneNo;
            this.saveData.phoneNumber=res.phoneNo;               
            this.phoneSys=true;               
            }
        })
    },
    methods: {
        onChange() {},
        onRead1(file) {
            this.showFile1=file.content;
        },
        onRead2(file) {
            this.showFile2=file.content;
        },
        onRead3(file) {
            this.showFile3=file.content;
        },
        showPic() {
            this.show = true;
        },
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`;
            } else if (type === 'month') {
                return `${value}月`
            } else if (type === 'day') {
                return `${value}日`
            } else if (type === 'hour') {
                return `${value}时`
            } else if (type === 'minute') {
                return `${value}分`
            }
            return value;
        },
        selectTime() {
            if(!this.saveData.illegalTime){
                this.saveData.illegalTime=moment().format('YYYY-MM-DD HH:mm');
            }            
            this.showTime = true;
        },
        hiddenTime() {
            this.showTime = false;
        },

        selectLink() {
            // onConfirm(value, index) {
            this.showLink = true;
        },
        hiddenLink() {
            // onConfirm(value, index) {
            this.showLink = false;
        },
         save(){
            if(this.ty){
                this.saveData.picStrs=[];
                if(this.showFile1){
                this.saveData.picStrs.push(this.showFile1);
                }
                if(this.showFile2){
                this.saveData.picStrs.push(this.showFile2);
                }
                if(this.showFile3){
                this.saveData.picStrs.push(this.showFile3);
                }
                IllegalReportService.saveIllegalReport(this.saveData).then((res) => {
               Toast.success('上报成功');        
            }, (err) => {
                Toast.fail('上报失败');
            });
            }else{
                 Toast.fail('请阅读相关说明');
            }
        },
        showTabbar(){
            this.tabbarSign=true;
        },
        hiddenTabbar(){
            this.tabbarSign=false;
        },
    getLxr( picker, value, index) {
      this.saveData.contractPerson=value;
    }
   
    },

    watch:{
        currentDate:{　　　　　　　　　
　　　　　　　handler(newVal,oldVal){
　　　　　　　　　this.saveData.illegalTime=moment(newVal).format('YYYY-MM-DD HH:mm')
　　　　　　　},
　　　　　　　deep:true//对象或数组
　　　　　},

        file1:{　　　　　　　　　
　　　　　　　handler(newVal,oldVal){
　　　　　　　},
　　　　　　　deep:true//对象或数组
　　　　　},



    }
};
</script>
<style>
.unlawful-reporting-background {
    position: absolute;
    top: 8px;
    left: 0px;
    height: 100vh;
    padding: 20px;
}

.unlawful-reporting-img {
    width: 98%;
    height: 98%;
    margin: 6px;
}

.unlawful-reporting-upload {
    /*border: 1px solid #a7a6a6;*/
    width: 98%;
    height: 103%;  
    margin: 6px;
    display: table;
    text-align: center;
}

.unlawful-reporting-icon {
    font-size: 50px;
    margin: 50px 100px;
    display: table-cell;
    vertical-align: middle;
}

.unlawful-reporting-field {
    border: 1px solid black;
    border-radius: 8px;
    margin-bottom: 15px 
}

.unlawful-reporting-lable {
    margin: 10px 10px 10px;
}

.unlawful-reporting-lable-bottom {
    margin: 10px 10px 15px;
}

.unlawful-reporting-item {
    background: #30AFF7;
    color: #FFFFFF;
    font-size: 20px
}
.unlawful-reporting-checkbox{
    display: inline-block;
    margin: 6px;
    overflow: visible;
}
</style>